<navigation></navigation>


<div class="container">

    <div class="starter-template">
        <h1>Pipes</h1>
        <p class="lead">Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones
            HTML document.</p>

        <h1>MyUppercase Pipe</h1>
        <p class="lead">{{value | myUppercase}}</p>

        <h1>Date Pipe</h1>
        <p class="lead">{{date}}</p>
        <p class="lead">{{date | date }}</p>
        <p class="lead">{{date | date:'dd.MM.yyyy' }}</p>
        <p class="lead">{{date | date:'shortDate'}}</p>
        <p class="lead">{{date | date:'fullDate' | uppercase}}</p>

    </div>

    <form>
        <div class="form-group">
            <div class="input-group">
                <div class="input-group-addon"><i class="glyphicon glyphicon-search"></i></div>
                <input type="text" class="form-control" name="searchString" placeholder="Type to search..." [(ngModel)]="searchString">
            </div>
        </div>
    </form>

    <ul>
        <li *ngFor="let item of items | filter : 'name' : searchString">{{item.name}}</li>
    </ul>

</div>
<!-- /.container -->